import { Calendar, momentLocalizer } from 'react-big-calendar'
  import {
    Button,
    Col,
    DatePicker,
    Drawer,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select,
  } from 'antd';
  import moment from 'moment';
  import { useEffect, useState, useCallback } from 'react';
  import "react-big-calendar/lib/css/react-big-calendar.css"
  import "moment/locale/zh-cn"
  import styles from './index.less';
    
  const localizer = momentLocalizer(moment)
  const Calender = (props) => {
    const [myEvents, setEvents] = useState(props.event)
    useEffect(()=>{ 
      setEvents(props.event)
    }, [props.event])
    const handleSelectSlot = useCallback(
      ({ start, end }) => {
        const title = window.prompt('New Event name')
        if (title) {
          setEvents((prev) => [...prev, { start, end, title }])
        }
      },
      [setEvents]
    )
    const handleSelectEvent = useCallback(
      (event) => window.alert(event.title),
      []
    )
    const myEventsList = ({event}) => {
      return (
        <span>
          <strong>{event.title}</strong>
          {event.desc && ':  ' + event.desc}
        </span>
      )
    }
    return (
        <div>
        <Calendar
          localizer={localizer}
          onSelectEvent={handleSelectEvent}
          onSelectSlot={handleSelectSlot}
          events={myEvents}
          startAccessor="start"
          endAccessor="end"
          style={{ height: 500 }}
        />
      </div>
    )
  }
  
  export default Calender;
  